<template>
  <div class="endNotify">
    <div v-if="!end_notify_list" class="default-page">
      <img src="../../../assets/img/defaultPage/pic_zwsj.png" alt="">
      <p>暂无数据</p>
    </div>
    <vuescroll :ops="ops">
    <ul class="list">
      <li v-for="(item,index) in end_notify_list" :key="index" @click="setRead(item)">
        <h3>
          <i v-if="!item.userRead"></i>
          <span></span>
          {{item.title}}
        </h3>
        <p class="ellipsis2">{{item.content}}</p>
      </li>
    </ul>
    </vuescroll>
    <loading v-if="is_show_loading"></loading>
  </div>
</template>

<script>
  import vuescroll from 'vuescroll'
  import loading from '@/components/loading'
  export default {
    name: "EndNotify",
    components: {
      vuescroll,loading
    },
    data(){
      return{
        is_show_loading:true,
        ops: {
          vuescroll: {
            wheelDirectionReverse: false,//true：横向滚动，false：竖向滚动
            wheelScrollDuration: 0,//滚动速度
            mode: 'native',
            sizeStrategy: 'percent',
            detectResize: true
          },
          scrollPanel: {
            scrollingX: false,//启用横屏滚动
            scrollingY: true,//关闭竖向滚动
            initialScrollY: false,
            initialScrollX: false,
            verticalNativeBarPos: 'right',
          },
          rail: {
            background: '#e5ebf1',
            opacity: 1,
            size: '6px',
            borderRadius: '6px',
            gutterOfEnds: '200px',//轨道距 x 和 y 轴两端的距离
            gutterOfSide: '0px'//距离容器的距离
          },
          bar: {
            onlyShowBarOnScroll: false,//是否只在滚动时显示bar
            background: '#cbd5df',
            keepShow: true,
            size: '4px',
            minSize: false
          }
        },//滚动配置
        end_notify_list:[],
      }
    },
    created() {
      this.get_end_notify();
    },
    methods:{
      //设置已读
      setRead(item){
        if(!item.userRead){
          this.$http.post('user/user/push/msg/userRead',{
            pushMsgId:item.pushMsgId,
            type:3
          }).then(res=>{
            if(res.statusCode==200){
              item.userRead=true;
              let obj=this.$store.state.countUnRead;
              obj.completeMsgPageCount=obj.completeMsgPageCount-1;
              this.$store.commit('SET_COUNT_UNREAD', obj);
            }
          })
        }
      },
      get_end_notify(){
        this.$http.get('user/user/push/msg/completeMsgPage',{
          params:{
            userId:this.$store.state.userInfo.userId,
            pageNum:1,
            pageSize:999
          }
        }).then(res=>{
          if(res.statusCode==200){
            this.end_notify_list=res.data.list;
            setTimeout(()=> {
              this.is_show_loading=false;
            }, 1000);
          }else {
            this.$message.error(res.statusMsg)
          }
        });
      }
    }
  }
</script>

<style scoped type="text/scss" lang="scss">
  .endNotify {
    width: 100%;
    height: 100%;
    padding: 24px;
    box-sizing: border-box;
    position: relative;
    .list{
      overflow: hidden;
      li{
        float: left;
        width: calc((100% - 16px - 16px)/3);
        height: 160px;
        background-color: #F2F6F9;
        border-radius: 6px;
        margin-right: 16px;
        margin-bottom: 16px;
        cursor: pointer;
        padding: 38px 43px 0 55px;
        font-size: 14px;
        color: #454A55;
        >h3{
          text-indent: 30px;
          font-weight: bold;
          padding-bottom: 30px;
          position: relative;
          i{
            width: 6px;
            height: 6px;
            border-radius: 6px;
            background-color:#FC5A44 ;
            position: absolute;
            left: -20px;
            top: 5px;
          }
          span{
            position: absolute;
            background-image: url("../../../assets/img/notify/ic_wjtb.png");
            width: 17px;
            height: 20px;
            background-repeat: no-repeat;
            background-size: cover;
            left: 0;
            top: -3px;
          }
        }
        >p{
          line-height: 20px;
        }
      }
      li:nth-child(3n){
        margin-right: 0;
      }
    }
  }
</style>
